<template>
    <a-dropdown placement="bottomRight">
        <span class="ant-pro-account-avatar">
            <a-avatar size="small" :src="avatar" class="antd-pro-global-header-index-avatar" />
            <span>{{ name }}</span>
        </span>
        <template v-slot:overlay>
            <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
                <a-menu-item key="logout" @click="handleLogout">
                    <a-icon type="logout" />
                    {{ $t('menu.account.logout') }}
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
    <!-- <span v-else>
        <a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
    </span> -->
</template>

<script>
import { Modal } from 'ant-design-vue'
import { mapState } from 'vuex'
export default {
    name: 'AvatarDropdown',
    props: {
        currentUser: {
            type: Object,
            default: () => null,
        },
        menu: {
            type: Boolean,
            default: true,
        },
    },
    methods: {
        handleLogout(e) {
            Modal.confirm({
                title: this.$t('layouts.usermenu.dialog.title'),
                content: this.$t('layouts.usermenu.dialog.content'),
                onOk: () => {
                    return this.$store.dispatch('Logout').then(() => {
                        this.$router.push({ name: 'login' })
                    })
                },
                onCancel() {},
            })
        },
    },
    computed: {
        ...mapState({
            avatar: (state) => state.user.avatar,
            name: (state) => state.user.name,
        }),
    },
}
</script>

<style lang="less" scoped>
.ant-pro-drop-down {
    /deep/ .action {
        margin-right: 8px;
    }
    /deep/ .ant-dropdown-menu-item {
        min-width: 100px;
    }
}
</style>
